<template>
  <view class="splash-container" v-if="show">
    <view class="splash-content">
      <!-- 微信小程序插屏广告 -->
      <!-- #ifdef MP-WEIXIN -->
      <ad
        :unit-id="adUnitId"
        ad-type="interstitial"
        @load="onAdLoad"
        @error="onAdError"
        @close="onAdClose"
      ></ad>
      <!-- #endif -->

      <!-- H5 端广告占位 -->
      <!-- #ifdef H5 -->
      <view class="ad-placeholder">
        <text class="ad-label">启动广告</text>
        <view class="skip-btn" @click="skipAd">
          <text class="skip-text">{{
            countdown > 0 ? `跳过(${countdown}s)` : "跳过"
          }}</text>
        </view>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useAdStore } from "@/stores/ad";
import { showInterstitialAd } from "@/utils/ad-manager";

const props = defineProps({
  adUnitId: {
    type: String,
    default: "",
  },
  delay: {
    type: Number,
    default: 5000, // 5秒
  },
});

const emit = defineEmits(["close"]);

const adStore = useAdStore();
const show = ref(true);
const countdown = ref(Math.floor(props.delay / 1000));
let countdownTimer = null;

onMounted(() => {
  const adConfig = adStore.adConfig;
  const unitId = props.adUnitId || adConfig.interstitial;

  // #ifdef H5
  // H5 端倒计时
  countdownTimer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(countdownTimer);
    }
  }, 1000);

  // 自动关闭
  setTimeout(() => {
    if (show.value) {
      closeAd();
    }
  }, props.delay);
  // #endif

  // #ifdef MP-WEIXIN
  // 微信小程序端使用插屏广告
  setTimeout(() => {
    showInterstitialAd();
  }, 1000);
  // #endif
});

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});

function skipAd() {
  if (countdown.value <= 0) {
    closeAd();
  }
}

function closeAd() {
  show.value = false;
  emit("close");
}

function onAdLoad() {
  console.log("启动广告加载成功");
  adStore.recordAdShow("interstitial");
}

function onAdError(err) {
  console.error("启动广告加载失败:", err);
  // 广告加载失败时也要关闭
  setTimeout(() => {
    closeAd();
  }, 1000);
}

function onAdClose() {
  closeAd();
}
</script>

<style scoped>
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: #000;
}

.splash-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
}

.ad-label {
  font-size: 48rpx;
  color: #fff;
  margin-bottom: 40rpx;
}

.skip-btn {
  position: absolute;
  top: 60rpx;
  right: 30rpx;
  padding: 10rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 30rpx;
}

.skip-text {
  font-size: 28rpx;
  color: #fff;
}
</style>
